I developed a set Javascript modules supporting the visual display of draughts on a webpage. I called it DraughtBoard. It is designed for the international 10x10 draughts but partially also for 8x8 draughts (checkers) and the chess game.
Its design goal is to display draughts, not to play draughts. Allthough DraughtBoard knows the rules of draughts, it has not the intelligence to play the game against an opponent.
This site will introduce you to applications which uses these Javascript modules.
I made three draughts PDN viewers which uses the PDN 3.0 standard for recording draughts games.
Two pages are dedicated to a draughts diagram maker for making images of a board.
Two similar diagram makers are made for the game of chess. A third tool allows you to easily make diagrams for fairy chess. Fairy chess is chess with unorthodox rules/pieces.
A final project is an application called Webdraughts. With webdraughts you can play a game. Moves are animated. It uses the websocket protocol to connect a remote player or to connect a draughts engine.
Of course the most important are the rules for moving and capturing. For captures it can be difficult to determine which capture is legal. Especially for captures where a king can capture many pieces. If multiple capture sequences are available, the system must select the sequence that captures the most pieces.
A FEN string is a standard notation for specifying a position on the board. DraughtBoard can read a draughts position given as a FEN string. The FEN-string should meet the PDN 3.0 standard.
This module parses a FEN string, convert it to an internal format and takes care of error control.
For the chess game the FEN notation is much simpler to process than for draughts. So no special module is made to process a chess FEN string.
PDN (Portable Draught Notation) is a standard for the notation of a draughts game. This module parses PDN text, converts it to an internal format (a Javascript object) and takes care of error control.
The PDN text should meet the PDN 3.0 standard.
DraughtBoard uses a PDN parser which is generated by PEG.js . To generate the parser I have used this
input
. You can make your own PDN parser by pasting your input in the online version of PEG.js
This module depends on all previous modules.
The module parses a PDN text, report errors (if any), displays a draughtboard and creates a so called pdnObject. With this pdnObject and its methods it is easy to show the progress of a game.
I have made three pages which demonstrates the use of the pdnObject (see menu options).
All PDN viewers outputs a text area 'parser status' which indicates how the parsing process has expired. It reports errors if the PDN text is not correct.
Also a text area 'parser output' is generated which shows the structure of the generated pdnObject (if you are interested).
The viewer pages can also be used as an online PDN checker to check the validity of a PDN file.
This module creates a high resolution image of the board. To mail a draughts diagram to a friend, insert into your documentation or use it on a website.
The module uses the HTML5 canvas element. Predefined themes for displaying the board are available.
Two diagram makers are available (see menu options).
The diagram makers can be configured with many options:
Looks like the module for creating an image of a draughts board.
Questions, remarks or suggestions? Please send a mail to:
Arthur Kalverboer